<template>
  <div class="user-avatar" :class="{ 'with-image': !!avatarUrl }">
    <img v-if="avatarUrl" :src="avatarUrl" alt="avatar" class="avatar-img" />
    <span v-else class="avatar-text">{{ nicknameFirst }}</span>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'UserAvatar',
  computed: {
    ...mapGetters('user', ['avatarUrl', 'nickname']),
    nicknameFirst() {
      return (this.nickname || '玩').charAt(0)
    }
  }
}
</script>

<style scoped>
/* ========== 武侠风格用户头像 ========== */
.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  border: 3px solid #4b3a2a;
  box-shadow: 0 3px 10px rgba(75, 58, 42, 0.3);
  transition: all 0.3s ease;
}

.user-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(75, 58, 42, 0.4);
}

.avatar-text { 
  font-size: 18px; 
  font-weight: bold; 
  color: #fff; 
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  font-family: "STSong", "Noto Serif SC", serif;
}

.avatar-img { 
  width: 100%; 
  height: 100%; 
  border-radius: 50%; 
  object-fit: cover; 
}

@media (max-width: 480px) {
  .user-avatar { width: 42px; height: 42px; margin-right: 10px; border-width: 2px; }
  .avatar-text { font-size: 16px; }
}

@media (max-width: 320px) {
  .user-avatar { width: 38px; height: 38px; margin-right: 8px; }
  .avatar-text { font-size: 14px; }
}
</style>